import { ArrowRight } from '@nutui/icons-react-taro'
import { Avatar, Button, Cell, CellGroup } from '@nutui/nutui-react-taro'
import { Text, View } from '@tarojs/components'
import Card from '../../components/card'
import Layout from '../../components/layout'
import { useNavigation } from '../../hooks/useNavigation'
import { useAuth } from '../../stores/auth'
import { confirmDialog } from '../../utils/toast'
import './index.less'

const Profile = () => {
  const { state, logout } = useAuth()
  const { user } = state
  const { navigateTo } = useNavigation()

  const handleEditProfile = () => {
    // 编辑个人资料
    console.log('编辑个人资料')
  }

  const handleAddressManagement = () => {
    navigateTo('/pages/address-management/index')
  }

  const handleAboutUs = () => {
    navigateTo('/pages/about/index')
  }

  const handleLogout = async () => {
    const confirmed = await confirmDialog('确定要退出登录吗？', '确认退出')

    if (confirmed) {
      // 清除用户信息
      logout()
      console.log('退出登录成功')
    }
  }

  return (
    <Layout title='设置'>
      {/* User Profile */}
      <Card className='user-profile-card' onClick={handleEditProfile}>
        <View className='user-profile-content'>
          <Avatar
            size='large'
            src={
              user?.avatar ||
              'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'
            }
            className='user-avatar'
          />
          <View className='user-info'>
            <Text className='user-name'>{user?.nickname || '张三'}</Text>
            <Text className='user-company'>{user?.level || '博兴公司'}</Text>
          </View>
          <Text className='arrow-icon'>arrow_forward_ios</Text>
        </View>
      </Card>

      {/* Account Settings */}
      <Card className='settings-card'>
        <CellGroup>
          <Cell title='手机号' extra='138****1234' className='settings-cell' />
          <Cell title='微信号' extra='wechat_id' className='settings-cell' />
        </CellGroup>
      </Card>

      {/* Other Settings */}
      <Card className='settings-card'>
        <CellGroup>
          <Cell
            title='地址管理'
            className='settings-cell clickable'
            onClick={handleAddressManagement}
            extra={<ArrowRight />}
          />
          <Cell title='关于我们' extra={<ArrowRight />} className='settings-cell clickable' onClick={handleAboutUs} />
        </CellGroup>
      </Card>

      {/* Logout Button */}
      <View className='logout-section'>
        <Button onClick={handleLogout} type='default' size='large' block className='logout-button'>
          退出登录
        </Button>
      </View>
    </Layout>
  )
}

export default Profile
